<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="" />
    <meta name="author" content="Ckryo">
    <link rel="icon" href="/favicon.ico">
    <!-- page title -->
    <title>LY'S-BLOG</title>
    <!-- bootstrap css -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <!-- css -->
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/magnific-popup.css" rel="stylesheet">
    <!-- fonts -->
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='/fonts/FontAwesome.otf' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/linear-icons.css">
    <link rel="stylesheet" href="/css/share.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
    <!-- javascript -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.easing.min.js"></script>
</head>
<body data-spy="scroll" data-target="#post-scroll-spy">
    <!-- preloader -->
    <div id="preloader">
        <div class="spinner spinner-round"></div>
    </div>
    <!-- / preloader -->
    <!-- header -->
    <header>
        <!-- nav -->
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-logo" href="/index.html">
                        LY'S blog
                    </a>
                </div>
                <!-- / navbar-header -->
                
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                    	
                        <li>
	                        <a href="/project/index.html">
	                        	
	                        	<span>项目</span>
	                        </a>
                        </li>
                        
                        <li>
	                        <a href="/post/index.html">
	                        	
	                        	<span>文章</span>
	                        </a>
                        </li>
                        
                        <li>
	                        <a href="/about.html">
	                        	
	                        	<span>关于我</span>
	                        </a>
                        </li>
                        
                    </ul>
                </div>
                
                <!--/ nav-collapse -->
            <!-- / container -->
        </nav>
        <!-- / nav -->
        <!-- header-banner -->
        <div id="header-banner" class="demo-1"  style="background-image: url(/images/banner-bg.jpg)" >
    <div class="banner-content text-center">
        <div class="banner-info">
            <h1 id="banner-title">罗渊的博客</h1>
            <p id="banner-description" style="display: none" data-in-effect="rotateInUpRight">
                追求知识的小星星
            </p>
        </div>
        <!-- / banner-info -->
    </div>
    <!-- / banner-content -->
</div>
        <!-- / header-banner -->
    </header>
    <!-- / header -->
    <!-- / content -->
    <link rel="stylesheet" href="/css/i_slidebar.css">
<link rel="stylesheet" href="/css/i_post.css">
<div id="page-content" class="container">
    <!-- post content + sidebar -->
    <section id="blog">
        <div class="row">
            <!-- post content area -->
            <div class="col-md-9">
                <div class="blog block post-content-area">
                    <img src="/images/post_preview_default.jpg" alt="">
                    <div class="post-info-box">
                        <h1 style="font-size: 48px;">JSON基础学习</h1>
                        <p class="post-info" style="margin-bottom: 15px;">
                            发表于:
                            <span style="color: #aaa; margin: 0 15px">
                                2017.09.01
                            </span>
                             | 分类：
                             <a href="#" style="margin: 0 5px">
                                
                                    Web
                                
                             </a>

                             <!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->
                                

                             
                                标签：
                                
                                    <a href="#" class="post-tag">JSON</a>
                                
                            
                        </p>
                        <h3 id="JSON简介"><a href="#JSON简介" class="headerlink" title="JSON简介"></a>JSON简介</h3><p>JSON的全称是<code>JavaScript Object notation</code>, 意思是JavaScript对象表示法。它是一种文本数据交换格式，并不是一种单独的语言。它在数据的表示和传输的过程中非常方便，因此有大量的应用。</p>
<a id="more"></a>
<h3 id="JSON表示格式"><a href="#JSON表示格式" class="headerlink" title="JSON表示格式"></a>JSON表示格式</h3><p>JSON的表示格式比较简单, 也比较容易读。比如我用JSON来表述一下我自己。<br><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">"name"</span>: <span class="string">"罗渊"</span>,</span><br><span class="line">    <span class="attr">"sex"</span>: <span class="string">"男"</span>,</span><br><span class="line">    <span class="attr">"age"</span>: <span class="number">20</span>,</span><br><span class="line">    <span class="attr">"description"</span>: <span class="string">"帅哥"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>这就是一个最简单的JSON表示。</p>
<h3 id="JSON-Scheme"><a href="#JSON-Scheme" class="headerlink" title="JSON Scheme"></a>JSON Scheme</h3><p>现在有一个问题，我不能确定发过来的JSON是不是我想要的。详细来说有三个问题：</p>
<ul>
<li>JSON有没有少数据</li>
<li>99</li>
<li>aa<br>这时候，我们可以用约定来解决。<code>Scheme</code>的意思就是约定。</li>
</ul>
<h3 id="AJAX中的JSON"><a href="#AJAX中的JSON" class="headerlink" title="AJAX中的JSON"></a>AJAX中的JSON</h3><h3 id="JSON的序列化和反序列化"><a href="#JSON的序列化和反序列化" class="headerlink" title="JSON的序列化和反序列化"></a>JSON的序列化和反序列化</h3><p>先说一下<code>序列化</code>和<code>反序列化</code>的概念。</p>
<ul>
<li><code>序列化</code>: 将对象转化为文本的过程。</li>
<li><code>反序列化</code>: 将文本转化为对象的过程。</li>
</ul>
<h3 id="客户端的JSON解析"><a href="#客户端的JSON解析" class="headerlink" title="客户端的JSON解析"></a>客户端的JSON解析</h3><p>JavaScript解析JSON比较方便，使用.parse()就可以解析。当然，JavaScript还是太麻烦，开发中可以使用JQuery来简化开发。<code>JQuery</code>是一个JavaScript框架，也可以说是一个库，它封装了大量的JS代码，非常方便我们的操作。</p>
<h3 id="服务端的JSON解析"><a href="#服务端的JSON解析" class="headerlink" title="服务端的JSON解析"></a>服务端的JSON解析</h3><p>服务端开发的选择有很多，可以使用<code>ASP</code>、<code>PHP</code>、<code>Java</code>、<code>Ruby</code>等等许多语言去开发。由于我是<code>Java</code>出身，这里介绍Java的JSON解析。</p>
<h3 id="JSON作为配置文件"><a href="#JSON作为配置文件" class="headerlink" title="JSON作为配置文件"></a>JSON作为配置文件</h3><h3 id="参考书目"><a href="#参考书目" class="headerlink" title="参考书目"></a>参考书目</h3><ul>
<li>《JSON必知必会》</li>
</ul>

                    </div>
                    <!-- / post-info-box -->
                </div>
                <!-- / blog-block -->
            </div>
            <!-- / col-md-9 -->
            <!-- / post content area -->
            <style type="text/css">
.post-tab-header {
    width: 100%;
    padding: 5px 50px;
    height: 40px;
    margin-bottom: 10px;
}

.post-tab-header li {
    width: 50%;
    float: left;
    text-align: center;
    cursor: pointer;
    padding-bottom: 10px;
}

.post-tab-header li.active {
    color: #c39d6d;
    border-bottom: 1px solid #c39d6d;
}

.post-tab-content .post-tab-item {
    display: none;
}

.post-tab-content .post-tab-item.active {
    display: block;
}

@keyframes MinefadeInUp {
    from {
        opacity: 0;
        transform: translateY(45px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.MinefadeInUp {
    animation-name: MinefadeInUp;
}

ol,
ul,
li {
    list-style: none;
}

.post-toc {
    font-size: 14px;
    color: #666;
    overflow: auto;
}

.post-toc .nav-link {
    padding: 0px;
}

.post-toc ol {
    margin: 0;
    padding: 5px 0 5px 20px;
    text-align: left;
    list-style: none;
    font-size: 14px;
}

.post-toc ol>ol {
    padding-left: 0;
}

.post-toc ol a {
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: all;
    color: #666;
    border-bottom-color: #ccc;
}

.post-toc ol a:hover {
    color: #000;
    border-bottom-color: #000;
}

.post-toc .nav-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.8;
}

.post-toc .nav .nav-child {
    display: none;
}

.post-toc .nav .active>.nav-child {
    display: block;
}

.post-toc .nav .active-current>.nav-child {
    display: block;
}

.post-toc .nav .active-current>.nav-child>.nav-item {
    display: block;
}

.post-toc .nav .active>a {
    color: #c39d6d;
    border-bottom-color: #c39d6d;
}

.post-toc .nav .active-current>a {
    color: #c39d6d;
}

.post-toc .nav .active-current>a:hover {
    color: #c39d6d;
}
</style>
<!-- post sidebar area -->
<div class="col-md-3">
    <div class="blog-sidebar" data-spy="affix" data-offset-top="627">
        <ul class="post-tab-header">
            <li class="active" data-index="0">文章目录</li>
            <li data-index="1">站点概览</li>
        </ul>
        <div style="clear: both"></div>
        <div class="post-tab-content">
            <div id="post-scroll-spy" data-index="0" class="active post-tab-item animated MinefadeInUp">
                <div class="post-toc">
                    <ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#JSON简介"><span class="nav-number">1.</span> <span class="nav-text">JSON简介</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSON表示格式"><span class="nav-number">2.</span> <span class="nav-text">JSON表示格式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSON-Scheme"><span class="nav-number">3.</span> <span class="nav-text">JSON Scheme</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#AJAX中的JSON"><span class="nav-number">4.</span> <span class="nav-text">AJAX中的JSON</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSON的序列化和反序列化"><span class="nav-number">5.</span> <span class="nav-text">JSON的序列化和反序列化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#客户端的JSON解析"><span class="nav-number">6.</span> <span class="nav-text">客户端的JSON解析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#服务端的JSON解析"><span class="nav-number">7.</span> <span class="nav-text">服务端的JSON解析</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSON作为配置文件"><span class="nav-number">8.</span> <span class="nav-text">JSON作为配置文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参考书目"><span class="nav-number">9.</span> <span class="nav-text">参考书目</span></a></li></ol>
                </div>
            </div>
            <div data-index="1" class="post-tab-item animated MinefadeInUp">
                <div class="blog block post-sidebar-widget">
    <img class="site-author-image" src="/images/my.jpg">
    <p class="site-author-name">阿文</p>
    <p class="site-author-description">Vimer</p>
    <!-- <div class="feed-link motion-element">
                        <a href="/atom.xml" rel="alternate">
                            <i class="fa fa-rss"></i> RSS
                        </a>
                    </div> -->
    <nav class="site-state motion-element">
        <div class="site-state-item site-state-posts">
            <a href="/archives">
                <!-- 计算文章 和 项目总数量 -->
                
                <span class="site-state-item-count">26</span>
                <span class="site-state-item-name">文章</span>
            </a>
        </div>
        <div class="site-state-item site-state-categories">
            <a href="/categories">
	            <span class="site-state-item-count">0</span>
	            <span class="site-state-item-name">项目</span>
            </a>
        </div>
    </nav>
</div>
            </div>
        </div>
    </div>
</div>
<!-- / col-sm-4 col-md-3 -->
<!-- / post sidebar area -->
<script type="text/javascript">
$(function() {
    $('.post-tab-header').on('click', 'li', function() {
        if ($(this).hasClass('active')) return;
        $('.post-tab-header li').removeClass('active');
        $('.post-tab-content .post-tab-item').removeClass('active');
        $(this).addClass('active');
        var index = $(this).data('index');
        $('.post-tab-content').find('.post-tab-item[data-index=' + index + ']').addClass('active');
    });
});
</script>
        </div>
        <!-- / row -->
    </section>
    <!-- / post content + sidebar -->
</div>

        <!-- / content -->
</body>
<!-- footer -->
<footer>
    <div class="container">
        <p class="footer-info">© Made by gitlily</p>
    </div>
    <!-- / container -->
</footer>
<!-- / footer -->
<!-- portfolio -->
<script src="/js/custom.js"></script>
<script src="/js/jquery.shuffle.min.js"></script>
<!-- lightbox -->
<script src="/js/jquery.magnific-popup.min.js"></script>
<!-- / lightbox -->
<!-- / portfolio -->
<!-- preloader -->
<script src="/js/preloader.js"></script>
<!-- / preloader -->
<!-- / javascript -->
<script src="/js/jquery.lettering.js"></script>
<script src="/js/jquery.textillate.js"></script>
<script>
$(function() {
    $('#banner-title').textillate({
        in: {
            // set the effect name
            effect: 'fadeInDown',
            callback: function() {
                $('#banner-description').css('display', 'block');
                $('#banner-description').textillate();
            }
        },
        // set the type of token to animate (available types: 'char' and 'word')
        type: 'char'
    });
});
</script>

</html>